<template>
  <v-container class="pa-10">
    <ActivityDetail v-if="activity" :activity="activity"></ActivityDetail>
    <v-divider class="my-5 grey lighten-3"></v-divider>
    <!-- 评论区 -->
    <v-card v-if="comments" flat>
      <h3 class="mb-5">{{ comments.length }}评论</h3>
      <div v-for="(comment, index) in comments" :key="index">
        <v-row>
          <!-- 显示评论 -->
          <v-col
            ><Comment :comment="comment" :floor="index + 1"></Comment
          ></v-col>
          <!-- 编辑和删除 -->
          <v-col v-if="user" class="col-2">
            <span v-if="user.id == comment.user_id"
              ><v-btn text dense small @click="editComment(comment)"
                >编辑</v-btn
              >
              <v-btn text dense small @click="deleteComment(comment.id)"
                >删除</v-btn
              ></span
            >
          </v-col>
        </v-row>
        <!-- 编辑区 -->
        <v-container
          v-if="showEditId == comment.id"
          class="ma-0 pa-0"
          fill-height
        >
          <!-- 空头像占位 -->
          <v-avatar class="mr-3" size="30"> </v-avatar>
          <v-textarea
            label="编辑评论"
            no-resize
            outlined
            rows="3"
            v-model="comment_edit"
          ></v-textarea>
          <v-btn text dense small @click="updateComment(comment.id)"
            >更新</v-btn
          >
        </v-container>
        <!-- 分割线 -->
        <v-divider
          v-if="index != Object.keys(comments).length - 1"
          class="mb-4 grey lighten-3"
        ></v-divider>
      </div>
    </v-card>
    <!-- 发表评论 -->
    <v-card v-if="user" class="mt-10" flat>
      <v-textarea
        label="发表评论"
        no-resize
        outlined
        rows="5"
        v-model="comment_area"
      ></v-textarea>
      <v-btn @click="postComment" text outlined>评论</v-btn>
    </v-card>
    <v-card v-else class="mt-10" flat>
      <v-btn @click="gotoLogin" dark color="blue" outlined
        >登录后发表评论</v-btn
      >
    </v-card>
  </v-container>
</template>

<script>
import ActivityDetail from "../components/ActivityDetail.vue";
import Comment from "../components/Comment.vue";
import axios from "axios";
import { mapGetters } from "vuex";

export default {
  name: "Activity",
  components: {
    Comment,
    ActivityDetail,
  },
  data() {
    return {
      // 活动信息
      activity: null,
      // 评论列表
      comments: null,
      // 发表
      comment_area: "",
      // 编辑
      comment_edit: "",
      showEditId: -1,
    };
  },
  computed: {
    ...mapGetters({ user: "stateUser" }),
  },
  methods: {
    // 获取活动信息
    async getActInfo() {
      let id = this.$route.params.id;
      await axios.get("activities/" + id).then((res) => {
        if (res.data.error_code == 1) this.$router.push({ name: "NotFound" });
        this.activity = res.data.activity;
      });
    },
    // 加载评论
    async loadComments() {
      let id = this.$route.params.id;
      await axios.get("activities/" + id + "/comments").then((res) => {
        this.comments = res.data.comments;
      });
    },
    // 发表评论
    async postComment() {
      let id = this.$route.params.id;
      await axios.post("activities/" + id + "/push_comment", {
        content: this.comment_area,
      });
      this.comment_area = "";
      await axios.get("activities/" + id + "/comments").then((res) => {
        this.comments = res.data.comments;
      });
    },
    // 删除评论
    async deleteComment(id) {
      await axios.post("activities/destroy_comment/" + id);
      await this.loadComments();
    },
    // 编辑评论
    editComment(comment) {
      this.showEditId = this.showEditId < 0 ? comment.id : -1;
      this.comment_edit = comment.content;
    },
    // 更新评论
    async updateComment(id) {
      await axios.post("activities/edit_comment/" + id, {
        content: this.comment_edit,
      });
      this.showEditId = -1;
      await this.loadComments();
    },
    // 登录
    gotoLogin() {
      this.$router.push("/auth");
    },
  },
  watch: {
    // 路由改变时加载活动信息
    $route: function () {
      let id = this.$route.params.id;
      axios.get("activities/" + id).then((res) => {
        if (res.data.error_code == 1) this.$router.push({ name: "NotFound" });
        this.activity = res.data.activity;
      });
    },
  },
  // 渲染前加载活动信息和评论
  beforeMount() {
    this.getActInfo();
    this.loadComments();
  },
};
</script>

<style scoped>
</style>